﻿<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>Leaflet互联网地图底图 By pmy</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <style>
        html,
        body,
        #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <!-- <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> -->
    <!-- <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /> -->
    <!-- <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script> -->
	 <script src="./package/jquery.min.js"></script>
    <link rel="stylesheet" href="./package/leaflet.css" />
    <script src="./package/leaflet.js"></script>
</head>

<body>
    <div id="map"></div>

    <script type="text/javascript">
        //初始化地图
        $(document).ready(function () {
            var map = L.map("map", {
                attributionControl: false,
                center: [31.834912, 117.220102],
                zoom: 12,
            });

            //控制地图底图
            var baseLayers = {
                高德地图: L.tileLayer(
                    "http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
                    { subdomains: "1234" }
                ).addTo(map),
                高德影像: L.layerGroup([
                    L.tileLayer(
                        "http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
                        { subdomains: "1234" }
                    ),
                    L.tileLayer(
                        "http://webst0{s}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",
                        { subdomains: "1234" }
                    ),
                ]),
                //天地图tk可以换成自己申请的key
                天地图: L.layerGroup([
                    L.tileLayer(
                        "http://t{s}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=56b81006f361f6406d0e940d2f89a39c",
                        { subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"] }
                    ),
                    L.tileLayer(
                        "http://t{s}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=56b81006f361f6406d0e940d2f89a39c",
                        { subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"] }
                    ),
                ]),
                天地图影像: L.layerGroup([
                    L.tileLayer(
                        "http://t{s}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=56b81006f361f6406d0e940d2f89a39c",
                        { subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"] }
                    ),
                    L.tileLayer(
                        "http://t{s}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=56b81006f361f6406d0e940d2f89a39c",
                        { subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"] }
                    ),
                ]),
                天地图地形: L.layerGroup([
                    L.tileLayer(
                        "http://t{s}.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=56b81006f361f6406d0e940d2f89a39c",
                        { subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"] }
                    ),
                    L.tileLayer(
                        "http://t{s}.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=56b81006f361f6406d0e940d2f89a39c",
                        { subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"] }
                    ),
                ]),				
                Google地图: L.tileLayer(
					"https://khms{s}.google.com/kh?hl=zh-CN&x={x}&y={y}&z={z}&v=979&lyrs=y",
					{ subdomains: ["0", "1"] }
                ),
				// 坐标系：GCJ02
				奥创谷歌地图: L.tileLayer(
					"http://gac-geo.googlecnapps.club/maps/vt?lyrs=m&x={x}&y={y}&z={z}",
                ),
                "GeoQ ": L.tileLayer(
                    "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}"
                ),
                "GeoQ 藏蓝": L.tileLayer(
                    "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}"
                ),
                "GeoQ 灰": L.tileLayer(
                    "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer/tile/{z}/{y}/{x}"
                ),
            };

            L.control.layers(baseLayers, {}, { position: "topright" }).addTo(map);
        });
    </script>
</body>

</html>